<template>
  <span>
    <input type="file" ref="file" style="display:none" @change="fileChange($event)"></input>
    <el-link type="primary" @click.native="upload()" :disabled="loading" title="点击选择文件">
      <slot>
        <i :class="loading?'el-icon-loading':'el-icon-plus'"></i>
        <span>选取文件</span>
      </slot>
    </el-link>
  </span>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "Upload",
  data() {
    return {
      loading: false
    }
  },
  methods: {
    fileChange(e) {
      let self = this;
      this.loading = true;
      api.upload(e.target.files[0]).then(data => {
        console.log(data.url)
        self.$emit('success', data.url);
      }).finally(() => self.loading = false);
    },
    upload() {
      this.$refs.file.click();
    }
  }
}
</script>

<style scoped>

</style>
